<script setup lang="ts">
	import skeleton from './index.skeleton.vue'
	import { formatDate } from '../../../utils'
	import { getOrderList } from '@/api/order'
	import { ref, onMounted, watch } from 'vue'
	import { onShow } from '@dcloudio/uni-app';
	const emit = defineEmits(['update:refresh']);
	const props = defineProps<{
		orderState : number,
		receiveData : object,
		refresh : boolean
	}>()
	const { safeAreaInsets } = uni.getSystemInfoSync()
	const queryParams = ref({
		PageIndex: 1,
		pageSize: 10,
		//OrderStatus: props.orderState,
		...props.receiveData
	})
	if(props.orderState){
		queryParams.value.OrderStatus = props.orderState
	}
	const loading = ref(false)
	const pages = ref(null)
	const isTriggered = ref(false)
	const orderList = ref([])
	const getMemberOrderData = async () => {
		loading.value=true
		try {
			const res = await getOrderList(queryParams.value)
			if(res.success){
				orderList.value = res.data.data
				pages.value = Math.ceil(res.data?.recordCount/queryParams.value.pageSize)
				console.log(pages.value)
			}
		} finally{
			loading.value=false
		}
		
	}
	const onScrolltolower = async () => {
		// loading.value=true
		if (queryParams.value.PageIndex > pages.value) return
		queryParams.value.PageIndex++
		const res = await getOrderList(queryParams.value)
		orderList.value = orderList.value.concat(res.data.data)
		// loading.value=false
	}
	const onRefresherrefresh = async () => {
		isTriggered.value = true
		try {
			queryParams.value.PageIndex = 1
			const res = await getOrderList(queryParams.value)
			orderList.value = res.data?.data
			pages.value = Math.ceil(res.data?.recordCount/queryParams.value.pageSize)
		} 
		finally{
			isTriggered.value = false
		}
	}
	// onMounted(() => {
	// 	getMemberOrderData()
	// })

	watch(
		() => props.receiveData, // 监听的目标（兄弟组件传递的值）
		(newVal, oldVal) => {
			if (newVal && newVal !== oldVal) {
				queryParams.value = {
					PageIndex: 1,
					pageSize: 10,
					...newVal
				}
				if(props.orderState){
					queryParams.value.OrderStatus = props.orderState
				}
				getMemberOrderData()
			}
		}
	)

	watch(
		() => props.orderState,
		(newVal, oldVal) => {
			if (newVal !== oldVal) {
				queryParams.value.PageIndex = 1
				if(newVal){
					queryParams.value.OrderStatus = newVal
				}
				else{
					delete queryParams.value.OrderStatus
				}
				getMemberOrderData()
			}
		}
	)

	watch(
		() => props.refresh,
		(newVal, oldVal) => {
			console.log("props.refresh", newVal,oldVal)
			if (newVal === true) {
				getMemberOrderData()
				// 不应直接修改props，应该通过emit事件通知父组件更新
				emit('update:refresh', false)
			}
		}
	)
</script>

<template>
	<scroll-view scroll-y class="scroll-view orders" refresher-enabled :refresher-triggered="isTriggered"
		@refresherrefresh="onRefresherrefresh" @scrolltolower="onScrolltolower">
		<skeleton v-if="loading"/>
		<view class="card" v-for="item in orderList" :key="item.id">
			<view class="card-header">
				<view>
					<view class="name">{{item.hotelName}}</view>
					<view class="order-num">订单号：{{item.orderNo}}</view>
				</view>
				<text class="status">{{item.statusDesc}}</text>
			</view>
			<view class="desc">
				<view class="text">入住日期</view>
				<view class="date">{{formatDate(item.checkIn,'YYYY-MM-DD')}}</view>
			</view>
			<view class="desc">
				<view class="text">离店日期</view>
				<view class="date">{{formatDate(item.checkOut,'YYYY-MM-DD')}}</view>
			</view>
			<view class="desc">
				<view class="text">房型</view>
				<view class="date">{{item.roomTypeName}}</view>
			</view>
			<view class="desc">
				<view class="text">总价</view>
				<view class="price">¥{{item.totalAmount}}</view>
			</view>
			<view class="action">
				<navigator class="button secondary" hover-class="none"
					:url="`/pagesOrder/detail/index?orderNo=${item.orderNo}`">查看详情</navigator>
				<!-- <navigator :url="`/pages/hotel/detail?id=${item.id}&destinationId${item.destinationId}&params=${item}`" class="button  primary" hover-class="none">
					再次预定
				</navigator> -->

			</view>
		</view>
		
		<view  :style="{ paddingBottom: safeAreaInsets?.bottom + 'px',height:'150px' }"></view>
		<view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
			{{ true ? '没有更多数据~' : '正在加载...' }}
		</view>
	</scroll-view>

</template>

<style lang="scss" scoped>
	.orders {
		.card {
			min-height: 100rpx;
			padding: 32rpx;
			margin: 32rpx 32rpx 0;
			border-radius: 12rpx;
			background-color: #fff;
			box-shadow: 0 3px 10px #efefef;

			.card-header {
				padding-bottom: 32rpx;
				border-bottom: 1px solid #e1e1ee;
				display: flex;
				justify-content: space-between;

				.order-num {
					color: #666;
				}

				.status {
					color: #666;
				}

				.name {
					color: #000;
					padding-bottom: 10rpx;
				}
			}

			.desc {
				display: flex;
				justify-content: space-between;
				padding-top: 10rpx;
				color: #333;

				.price {
					color: #f97316;
				}
			}
		}



		.action {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding-top: 20rpx;

			.button {
				width: 180rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 20rpx;
				border-radius: 10rpx;
				border: 1rpx solid #ccc;
				font-size: 26rpx;
				color: #444;
			}

			.secondary {
				color: $uni-color-primary;
				border-color: $uni-color-primary;
			}

			.primary {
				color: #fff;
				background-color: $uni-color-primary;
			}
		}

		.loading-text {
			text-align: center;
			font-size: 28rpx;
			color: #666;
			padding: 20rpx 0;
		}
	}
</style>